<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="nofollow,noarchive,noindex">
  <title>{{ code }}: {{ message }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- {{ if or (eq code 408) (eq code 425) (eq code 429) (eq code 500) (eq code 502) (eq code 503) (eq code 504) }} -->
  <meta http-equiv="refresh" content="30">
  <!-- {{ end }} -->
  <meta name="title" content="{{ code }}: {{ message | escape }}">
  <meta name="description" content="{{ description | escape }}">
  <meta property="og:title" content="{{ code }}: {{ message | escape }}">
  <meta property="og:description" content="{{ description | escape }}">
  <meta property="twitter:title" content="{{ code }}: {{ message | escape }}">
  <meta property="twitter:description" content="{{ description | escape }}">
  <style>
    :root {
      --color-desktop: #008080;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-desktop: #1a1a1a;
      }
    }

    html, body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
      font-size: 16px;
    }

    @media screen and (min-width: 2000px) {
      html, body {
        font-size: 18px;
      }
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    main {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    .desktop {
      background-color: var(--color-desktop);
      flex: 1;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      grid-template-rows: repeat(auto-fill, 100px);
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
    }

    .desktop .desktop-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      user-select: none;
      padding: 10px 10px 0 20px;
    }

    .desktop .desktop-icon svg {
      width: 48px;
      height: 48px;
    }

    .desktop .desktop-icon p {
      margin: 0;
      font-size: 0.85em;
      padding-top: 0.5em;
    }

    dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      border: none;
      box-shadow:
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #808080;
      padding: 3px;
      background-color: #c0c0c0;
      max-width: 95%;
    }

    dialog.blink header {
      background: linear-gradient(90deg, #000080, #1084d0);
      animation: blink 350ms infinite;
    }

    @keyframes blink {
      0% { background: linear-gradient(90deg, #808080, #b5b5b5); }
      49.99% { background: linear-gradient(90deg, #808080, #b5b5b5); }
      50% { background: linear-gradient(90deg, #000080, #1084d0); }
      100% { background: linear-gradient(90deg, #000080, #1084d0); }
    }

    dialog header {
      display: flex;
      flex-direction: row;
      height: 20px;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(90deg, #000080, #1084d0);
    }

    dialog header p {
      margin: 0 5px 0 2px;
      color: #fff;
      font-size: 0.8em;
      font-weight: bold;
      user-select: none;
      white-space: nowrap;
    }

    dialog header .controls {
      display: flex;
      padding-right: 2px;
    }

    dialog header .controls .button {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #c0c0c0;
      padding: 4px;
      box-shadow:
        inset 1px 1px 0 #fff,
        inset -1px -1px 0 #000,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
    }

    dialog section {
      display: flex;
      flex-direction: row;
    }

    dialog section .icon {
      padding: 12px;
    }

    dialog section .content {
      padding: 18px 0;
      margin-right: 10px;
    }

    dialog section .content p {
      margin: 0;
    }

    dialog section .content .details {
      font-size: 0.8em;
      padding-top: 1em;
      color: #252525;
    }

    dialog .actions {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0 0 8px 0;
    }

    dialog .actions button {
      background-color: #c0c0c0;
      padding: 4px 8px;
      margin: 4px;
      box-shadow:
        inset 1px 1px 0 #fff,
        inset -1px -1px 0 #000,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
      color: #868080;
      text-shadow: 1px 1px 0 #fff;
      border: 1px solid #000;
      min-width: 80px;
      border-radius: 0;
      user-select: none;
    }

    dialog .actions button:focus {
      outline: none;
    }

    .taskbar {
      background-color: #c0c0c0;
      box-sizing: border-box;
      height: 30px;
      width: 100%;
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: inset 0 1px 0 #dfdfdf, inset 0 2px 0 #fff;
      padding: 4px 2px 2px 2px;
      cursor: default;
      z-index: 1000;
      user-select: none;
    }

    .taskbar .group {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .taskbar .start {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      height: 100%;
      background-color: #c0c0c0;
      color: #000;
      padding: 0 6px;
      box-shadow:
        inset 1px 1px 0 #fff,
        inset -1px -1px 0 #000,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
      font-family: 'Tahoma', sans-serif;
    }

    .taskbar .start svg {
      margin-right: 1px;
    }

    .taskbar .spacer {
      width: 2px;
      height: 100%;
      box-shadow: inset 1px 0 0 #808080, inset -1px 0 0 #fff;
      margin-left: 2px;
    }

    .taskbar .tray {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
      padding: 0 4px;
      height: 100%;
      background-color: #c0c0c0;
      box-shadow:
        inset 1px 1px 0 #808080,
        inset -1px -1px 0 #fff;
    }

    .taskbar .tray svg {
      margin-right: 4px;
    }

    .taskbar .tray .clock {
      font-size: 0.75em;
      white-space: nowrap;
    }
  </style>
</head>
<body>
<main>
  <div class="desktop">
    <div class="desktop-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467">
        <path d="M1.852 1.852v2.646h2.117 1.852V1.852H3.969z" fill="#00f"/>
        <path d="M6.879.265v.265h.265V.265zm0 .265h-.265v.265h.265zm-.265.265H1.323v.265h5.292zm-5.292.265h-.265v4.233h.265zm4.762.265v3.44H1.588v.265h4.498.265V1.323zM2.91 2.646v.265.529h.529V2.91h.794v-.265zm.794.529v.794h1.323v-.794zm-3.44 2.91v.265 1.588h.265V6.35h6.615v-.265z" fill="#fff"/>
        <path d="M1.852.265v.265h-.265v.265h5.027V.529h.265V.265zm-.529.794v.265 3.704.265H6.35h.265V1.323v-.265H1.588zm.265.265H6.35v3.704H1.588zm6.085 3.969v.265h.265v-.265zm0 .265h-.265v.265h.265zm-.265.265h-.265v.265h.265zM.529 6.35v1.588h6.615V6.35z" fill="silver"/>
        <path d="M1.852 0v.265h5.292v.265h-.265v.265h-.265v4.498H1.058V1.058H.794v4.498h.265 5.821v-.265h.265v-.265h.265V.529 0h-.265zm5.556 5.027v.265h-.265v.265h-.265v.265H.265v.265h6.879v-.265h.265v-.265h.265v-.265h.265v.265h-.265v.265h-.265v.265h-.265v1.852H.265V6.085H0v2.117h.265 7.144v-.265h.265v-.265h.265v-.265h.265V5.556v-.529h-.265zm-6.35-3.969h.265V.794h-.265zm.265-.265h.265V.529h-.265zm.265-.265h.265V.265h-.265zm0 .794v.265h4.498v-.265zm1.058 1.323v.794h.265v-.794zm.794.529v.794h.265v-.794zm.529 3.44v.265h2.646v-.265zm1.588.529v.265h.265v-.265z" fill="gray"/>
        <path d="M7.408.265v4.762h.265V.265h-.265zm0 4.762h-.265v.265h.265v-.265zm-.265.265h-.265v.265h.265v-.265zm-.265.265H.794v.265h6.085v-.265zM1.588 1.588v2.91h.265V1.852h3.969v-.265H1.852h-.265zm1.058.794v.265h1.588v.265h.265v-.265-.265H2.646zm2.381.529v1.058H3.44v.265h1.588.265V2.91h-.265zm-2.381.529v.265h.794V3.44h-.794zm5.556 1.852v2.117h.265V5.292h-.265zm0 2.117h-.265v.265h.265v-.265zm-.265.265h-.265v.265h.265v-.265zm-.265.265h-.265v.265h.265v-.265zm-.265.265H.265v.265h7.144v-.265zm-3.44-1.323v.265h2.646v-.265H3.969z" fill="#000"/>
        <path d="M1.058 7.144v.265h.265.265v-.265h-.265z" fill="green"/>
        <path d="M1.058 6.879v.265h.265.265v-.265h-.265z" fill="#0f0"/>
        <path d="M2.117 2.117v.265.265h.265v-.265-.265z" fill="#0ff"/>
        <path d="M5.821 1.588v2.91H1.588v.265h4.233.265V1.588h-.265zM3.44 2.91v.265h1.588V2.91H3.44z" fill="navy"/>
      </svg>
      <p data-l10n>My Computer</p>
    </div>
    <div class="desktop-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467">
        <path d="M4.233.265v.265h-.265v.265h-.265v.265H3.44v.265h-.265-1.852v.265h-.265v.265H.794V3.44H.265v.265H0v1.323h.265v1.058h.265v1.058h.265v.794h.265v.265h6.615v-.265h.265v-2.91-.265h.265v-.265h.265v-.265h-.265v-.265h-.265v-.265-1.058h-.265v-.265h-.265v-.265H6.35h-.265v-.265h-.265v-.265h-.265v-.265h-.265v-.265h-.265V.794h-.265V.529h-.265V.265h-.265z" fill="#330"/>
        <path d="M7.673 5.027v.265h-.265V6.35h.265v1.588h.265v-2.91zm0 2.91H1.058v.265h6.615z"/>
        <path d="M2.381 1.852v.265h.265v-.265zm0 .265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265zM.265 3.44v.265h6.35V3.44zm6.35.265v.265h.265v-.265zm.265.265v.794h.265v-.794zm.265.794v.794h.265v-.794zM.265 3.704H0v1.323h.265zm0 1.323v1.058h.265V5.027zm.265 1.058v1.058h.265V6.085zm.265 1.058v.794h.265 6.615v-.265V6.35h-.265v1.323h-6.35v-.529z" fill="#990"/>
        <path d="M2.646 1.588v.265h.265v-.265zm-1.058.265v.265h-.265v.794h.265v-.265h.265v-.265h.265v-.265h.265v-.265h-.265-.265zm5.027.529v.265h.265v.265h.265v.265h.265V2.91v-.265h-.265v-.265zm0 1.588v.265h.265v-.265zm.265.794v.265h.265v-.265zm.265.794v.265h.265v-.265z" fill="#cc6"/>
        <path d="M1.323 1.588v.265h-.265v.265V3.44h.265V2.117h.265v-.265h1.058v-.265H1.323zM.529 3.969v1.058h.265v1.058h.265v1.323h5.556.265.265V5.027h-.265v-.794h-.265v-.265H1.058.794.529z" fill="#ff9"/>
        <path d="M2.91 3.969v.265h.265v-.265zm.794 0v.265h.265v-.265zm.529 0v.265h.265v-.265zm.529 0v.265h.265v-.265zm1.058 0v.265h.265v-.265zm0 .265h-.265v.265h.265zm.529 0v.265h.265v-.265zm0 .265h-.265v.265h.265zm0 .265v.265h.265v-.265zm-5.027-.265v.265h.265v-.265zm1.058 0v.265h.265v-.265zm.265.265v.265h.265v-.265zm0 .265h-.265v.265h.265zm.529-.529v.265h.265v-.265zm.265.265v.265h.265v-.265zm1.058-.265v.265h.265v-.265zm.529 0v.265h.265v-.265zm-1.058.265v.265h.265v-.265zm-2.117.265v.265h.265v-.265zm3.175 0v.265h-.265v.265h.265.265v-.529zm.265.529v.265h.265v-.265zm.265 0h.265v-.529h-.265zm.265 0v.529h.265v-.529zm.265 0h.265v-.265h-.265zm.265 0v.529h.265v-.529zm.265 0h.265v.529h.265v.265h-.265v-.265h-.265v.265H6.35v.265h.265v.265h.265v-.265h.265v.265h-.265v.265h-.265v.265H6.35v-.265h.265v-.265H6.35v-.265h-.265v.265h-.265v.265h.265v.265h-.265v-.265h-.265v.265h-.265v-.265h-.265v.265h-.529v-.265h-.529v.265h-.265v-.265h-.529v.265h-.529v-.265h-.265v.265h-.529v-.265h-.265v.265h-.529v.265h6.35v-.265-1.587h-.265v-.794h-.265v.265h-.265zM1.588 7.144v-.265h-.265v.265zm-.265-.265v-.265h-.265v.265zm.529.265h.265v-.265h-.265zm.265-.265h.265v-.265h-.265zm.529.265h.529v-.265h-.529zm.529-.265h.265v-.265h-.265zm.265-.265h.265V6.35H3.44zm0-.265v-.265h-.265v.265zm-.265-.265v-.265H2.91v.265zm.265 0h.265v-.265H3.44zm.265 0v.265h.265v-.265zm0 .529v.529h.265v-.265h.265v-.265h-.265zm.529 0h.529V6.35h-.529zm.529-.265h.265v-.265h-.265zm0-.265v-.529h-.265v.265h-.265v.265h.265zm-.529-.265v-.265h-.265v.265zm0-.265h.265v-.265h-.265zm.794.529h.265v-.265h-.265zm.265 0v.265h.529v-.265zm.529.265v.265h.265V6.35zm.265 0h.265v-.265h-.265zm-.265.265h-.265-.265v.529h.265v-.265h.265zm-.529 0V6.35h-.265v.265zm-.265 0h-.265v.265h-.265v.265h.529v-.265zM1.058 5.292v.265h.265v-.265zm1.852 0v.265h.265v-.265zm.529 0v.265h.265v-.265zm-1.587.265v.265h.265v-.265zm0 .265h-.265v.265h.265zm0 .265v.265h.265v-.265zm-.265 0h-.265v.265h.265zm.794-.529v.265h.265v-.265zm0 .529v.265h.265v-.265zm.265.265v.265h.265V6.35z" fill="#fc9"/>
        <path d="M1.323 1.323v.265h1.852v-.265zm0 .265h-.265v.265h.265zm-.265.265H.794V3.44h.265zm5.292.265v.265h.794v.265h.265v-.265-.265zm1.058.529v.794h.265v-.794z" fill="olive"/>
        <path d="M4.233.265v.265h.265V.265zm0 .265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265H3.44v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265H2.91v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265z" fill="#868686"/>
        <path d="M6.615 2.646v.265h.265v-.265zm1.058 1.058v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm0 .265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.265v.265h.265z" fill="#000"/>
        <path d="M4.498.529v.265h.265V.529zm.265.265v.265h.265V.794zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.529.529v.265h.265V2.91zm.265.265v.265h.265v-.265zm.265.265v.265h.265V3.44z" fill="#555"/>
        <path d="M3.969 1.852v.265h.265v-.265zm0 .265h-.265v.265h.265zm-.265.265H3.44v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265H2.91v.265h.265zm-.265.265h-.265v.265h.265zm1.323-.794v.265h.265v-.265zm0 .265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265H3.44v.265h.265zm1.058-.529v.265h.265v-.265zm0 .265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm.794-.265v.265h.265V2.91zm0 .265h-.265v.265h.265z" fill="#039"/>
        <path d="M4.498.794v.265h.265V.794zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.529.529v.265h.265v-.265zm.265.265v.265h.265V2.91zm.265.265v.265h.265v-.265zm.265.265v.265h.265V3.44zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm.265.265v.265h.265v-.265zm0 .265h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265 0v-.794h-.265v.794zm-.265-.794v-.265h-.265v.265zm-.265-.265V3.44h-.265v.265zm-.265-.265v-.265H5.556v.265zm-5.027-.265v.265h1.058v-.265zm1.588 0v.265h.265v-.265zm.794 0v.265h.265v-.265zm.794 0v.265h.265v-.265z" fill="silver"/>
        <path d="M4.233.529v.265h.265V.529zm1.852 1.852v.265h.265v-.265z" fill="#ada990"/>
        <path d="M7.408 2.381v.265h.265v-.265zm.265.265v1.058h.265V2.646z" fill="#033"/>
        <path d="M3.969.794v.265h-.265v.265H3.44v.265h-.265v.265H2.91v.265h-.265v.265h-.265v.265h-.265v.265h1.058v-.265h.265v-.265h.265v-.265h.265v-.265h.265v.265.265h.265v.265.265h.265v-.265h.265v.265H6.35v-.265h-.265v-.265h-.265v-.265h-.265v-.265h-.265v-.265h-.265v-.265h-.265v-.265h-.265V.794z" fill="#fffbf0"/>
        <path d="M3.969 2.381v.265h.265v-.265h-.265zm0 .265h-.265v.265h.265v-.265zm-.265.265H3.44v.265h.265V2.91zm-1.852 0v.265H2.91V2.91H1.852zm2.381 0v.265h.265V2.91h-.265zm.794 0v.265h.265V2.91h-.265zm.529 0v.265h1.058V2.91H5.556zm1.058.265v.265h.265v-.265h-.265zm.265.265v.265h.265V3.44h-.265zm.265.265v.265h.265v-.265h-.265zm.265.265v.794h.265v-.265h.265v-.265h-.265v-.265h-.265z" fill="#e7e7d6"/>
        <path d="M3.969 2.117v.265h.265v-.265h-.265zm0 .265h-.265v.265h.265v-.265zm-.265.265H3.44v.265h.265v-.265zm-.265.265h-.265v.265h.265V2.91zm-.265.265H2.91v.265h.265v-.265zm1.058-.529v.265h.265v-.265h-.265zm0 .265h-.265v.265h.265V2.91zm-.265.265h-.265v.265h.265v-.265zm.794-.265v.265h.265V2.91h-.265zm0 .265h-.265v.265h.265v-.265zm.529 0v.265h.265v-.265h-.265z" fill="#a0a0a4"/>
        <path d="M.265 3.704v.265 1.058h.265V3.969h6.085v-.265H.265zm.265 1.323v1.058h.265V5.027H.529zm.265 1.058v1.058h.265V6.085H.794z" fill="#fffbf0"/>
      </svg>
      <p data-l10n>My Documents</p>
    </div>

    <dialog open>
      <header>
        <p>{{ code }}: <span data-l10n>{{ message }}</span></p>
        <div class="controls">
          <div class="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 2.381 2.117">
              <path d="M.265.265v.265h.265v.265h.265v.265h.265v.265H.794v.265H.529v.265H.265v.265h.529v-.265h.265v-.265h.529v.265h.265v.265h.529v-.265h-.265v-.265h-.265v-.265h-.265v-.265h.265V.794h.265V.529h.265V.265h-.529v.265h-.265v.265h-.529V.529H.794V.265z" fill="#fff"/>
              <path d="M0 0v.265h.265v.265h.265v.265h.265v.265H.529v.265H.265v.265H0v.265h.529v-.265h.265v-.265h.529v.265h.265v.265h.529v-.265h-.265v-.265h-.265v-.265h-.265V.794h.265V.529h.265V.265h.265V0h-.529v.265h-.265v.265H.794V.265H.529V0z" fill="gray"/>
            </svg>
          </div>
        </div>
      </header>
      <section>
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467">
            <path d="M1.587 1.587v5.821h.265v.265h.529v.265h.265v.265h.794v.265h2.117v-.265h.794v-.265h.265v-.265h.529v-.265h.265v-.265h.265v-.529h.265V6.35h.265v-.794h.265V3.44h-.265v-.794h-.265v-.265h-.265v-.529h-.265v-.265z" fill="gray"/>
            <path d="M2.91 0v.265h-.794v.265h-.265v.265h-.529v.265h-.265v.265H.794v.529H.529v.265H.265v.794H0v2.117h.265v.794h.265v.265h.265v.529h.265v.265h.265v.265h.529v.265h.265v.265h.794v.265h2.117v-.265h.794v-.265h.265v-.265h.529v-.265h.265v-.265h.265v-.529h.265v-.265h.265v-.794h.265V2.91h-.265v-.794h-.265v-.265h-.265v-.529h-.265v-.265h-.265V.794h-.529V.529h-.265V.265h-.794V0z" fill="red"/>
            <path d="M2.91 0v.265h2.117V0zm2.117.265v.265h.794V.265zm.794.265v.265h.265V.529zm.265.265v.265h.529V.794zm.529.265v.265h.265v-.265zm.265.265v.529h.265v-.529zm.265.529v.265h.265v-.265zm.265.265v.794h.265v-.794zm.265.794v2.117h.265V2.91zm0 2.117h-.265v.794h.265zm-.265.794h-.265v.265h.265zm-.265.265h-.265v.529h.265zm-.265.529h-.265v.265h.265zm-.265.265h-.529v.265h.529zm-.529.265h-.265v.265h.265zm-.265.265h-.794v.265h.794zm-.794.265H2.91v.265h2.117zm-2.117 0v-.265h-.794v.265zm-.794-.265v-.265h-.265v.265zm-.265-.265v-.265h-.529v.265zm-.529-.265v-.265h-.265v.265zm-.265-.265v-.529H.794v.529zm-.265-.529v-.265H.529v.265zm-.265-.265v-.794H.265v.794zm-.265-.794V2.91H0v2.117zm0-2.117h.265v-.794H.265zm.265-.794h.265v-.265H.529zm.265-.265h.265v-.529H.794zm.265-.529h.265v-.265h-.265zm.265-.265h.529V.794h-.529zm.529-.265h.265V.529h-.265zm.265-.265h.794V.265h-.794z" fill="maroon"/>
            <path d="M2.381 1.852v.265h-.265v.265h-.265v.265h.265v.265h.265v.265h.265v.265h.265v.265h.265v.529H2.91v.265h-.265v.265h-.265v.265h-.265v.265h-.265v.265h.265v.265h.265v.265h.265v-.265h.265v-.265h.265v-.265h.265v-.265h.265v-.265h.529v.265h.265v.265h.265v.265h.265v.265h.265v.265h.265v-.265h.265v-.265h.265v-.265h-.265v-.265h-.265v-.265h-.265v-.265h-.265v-.265h-.265v-.529h.265V3.44h.265v-.265h.265V2.91h.265v-.265h.265v-.265h-.265v-.265h-.265v-.265h-.265v.265h-.265v.265h-.265v.265h-.265v.265h-.265v.265h-.529V2.91H3.44v-.265h-.265v-.265H2.91v-.265h-.265v-.265z" fill="#fff"/>
          </svg>
        </div>
        <div class="content">
          <p><span data-l10n>{{ description }}</span><!-- {{- if show_details -}} -->.<!-- {{- end -}} --></p>
          <!-- {{- if show_details -}} -->
          <div class="details">
            <!-- {{- if host -}} -->
            <p class="output small"><span data-l10n>Host</span>: <code>{{ host }}</code></p>
            <!-- {{- end }}{{ if original_uri -}} -->
            <p class="output small"><span data-l10n>Original URI</span>: <code>{{ original_uri }}</code></p>
            <!-- {{- end }}{{ if forwarded_for -}} -->
            <p class="output small"><span data-l10n>Forwarded for</span>: <code>{{ forwarded_for }}</code></p>
            <!-- {{- end }}{{ if namespace -}} -->
            <p class="output small"><span data-l10n>Namespace</span>: <code>{{ namespace }}</code></p>
            <!-- {{- end }}{{ if ingress_name -}} -->
            <p class="output small"><span data-l10n>Ingress name</span>: <code>{{ ingress_name }}</code></p>
            <!-- {{- end }}{{ if service_name -}} -->
            <p class="output small"><span data-l10n>Service name</span>: <code>{{ service_name }}</code></p>
            <!-- {{- end }}{{ if service_port -}} -->
            <p class="output small"><span data-l10n>Service port</span>: <code>{{ service_port }}</code></p>
            <!-- {{- end }}{{ if request_id -}} -->
            <p class="output small"><span data-l10n>Request ID</span>: <code>{{ request_id }}</code></p>
            <!-- {{- end -}} -->
            <p class="output small"><span data-l10n>Timestamp</span>: <code>{{ nowUnix }}</code></p>
          </div>
          <!-- {{- end -}} -->
        </div>
      </section>
      <div class="actions">
        <button disabled>OK</button>
      </div>
    </dialog>
  </div>
  <div class="taskbar">
    <div class="group">
      <div class="start">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 21.167 18.521">
          <path d="M11.906 0v1.323H9.26v1.323H7.938v1.323H5.292v1.323H3.969V3.969H2.646v2.646h1.323 1.323 2.646v7.938 1.323H5.292v1.115.208H3.969v-1.323H2.646v1.323 1.323H9.26v-1.323h2.646v-.208-1.115h2.646 2.646v1.323h2.646v1.323h1.323V2.646h-1.323V1.323h-2.646V0h-5.292zM0 2.646v2.646h1.323V2.646H0zm0 11.906v2.646h1.323v-2.646H0z"/>
          <path d="M11.906 2.646v1.323h-1.323v3.969h1.323V6.615h1.323V2.646zM0 6.615V9.26h1.323V6.615zm2.646 1.323v2.646h1.323 1.323 2.646V7.938H5.292V9.26H3.969V7.938z" fill="red"/>
          <path d="M15.875 2.646v3.969h1.323v1.323h1.323V3.969h-1.323V2.646z" fill="#0f0"/>
          <path d="M11.906 9.26v1.323h-1.323v3.969h1.323v-1.323h1.323V9.26zM0 10.583v2.646h1.323v-2.646zm2.646 1.323v2.646h1.323 1.323 2.646v-2.646H5.292v1.323H3.969v-1.323z" fill="#00f"/>
          <path d="M15.875 9.26v3.969h1.323v1.323h1.323v-3.969h-1.323V9.26z" fill="#ff0"/>
        </svg>
        <strong data-l10n>Start</strong>
      </div>
      <div class="spacer"></div>
    </div>
    <div class="group"></div>
    <div class="group">
      <div class="spacer"></div>
      <div class="tray">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
          <path d="M.265.265h3.44v3.44H.265z" fill="#fff"/>
          <path d="M0 0v.265 1.323h.265V.265h.529V0zm1.058 0v.265h1.058V0zm1.058.265v.265h1.852V.265zm0 .794v.265H3.44v.529h.265v-.529-.265zm-1.852.794v1.323.265h1.587v-.265H.529V1.852zm2.117.529v.265h.265v-.265zm1.058 0v.265h.265v-.265zm-1.058.529v.265h.265V2.91zm0 .529v.265h.265V3.44zm.529 0v.265h.265V3.44zm.529 0v.265h.265V3.44z" fill="#85898d"/>
          <path d="M1.588.265v1.323h.265V.265zm1.058.529v.265h.265V.794zm.529 0v.265h.265V.794zM.529 1.852v1.323h.265V1.852z" fill="#c2c6ca"/>
          <path d="M.265.529v.265h.265V.529zm1.058 0v.265h.265V.529zm-1.058.529v.265h.265v-.265zm1.058 0v.265h.265v-.265z" fill="#100dfb"/>
          <path d="M2.117.529v.265.265h.529V.794h1.058V.529zm.794 2.117v.529h.265.265V2.91h-.265v-.265z" fill="#0706a7"/>
          <path d="M.794.265v1.323h.265V.265zm.265 1.323v.265h1.058v-.265V.265h-.265v1.323zm-.265 0H0v.265h.794zM3.704.529v.265H3.44v.265h.265v1.323h.265V.529zm.265 1.852v1.323h.265V2.381zm0 1.323h-.265v.265h.265zm-.265.265H2.381v.265h1.323zM2.91.794v.265h.265V.794zM.265 3.44v.265h1.587V3.44z" fill="#000"/>
          <path d="M2.381 1.852v.265h-.265v.265h-.265v.265 1.058h.265v.265h.265.265v-.265h-.265V3.44h-.265v-.794h.265v-.265h.265v-.265h.794v.265h.265v-.529H3.44zm1.323.529v.265h.265v-.265zm0 1.058v.265h.265V3.44zm0 .265H3.44v.265h.265z" fill="#a90055"/>
          <path d="M2.646 2.117v.265h.794v-.265zm-.529.529v.794h.265v-.794zm1.588 0v.794h.265v-.794zM2.646 3.704v.265h.794v-.265z" fill="#fd0016"/>
        </svg>
        <div class="clock">00:00 AM</div>
      </div>
    </div>
  </div>
</main>
<script>
  'use strict';

  /**
   * Set the clock to the current time in HH:MM AM/PM format.
   *
   * @return {void}
   */
  const updateClock = () => {
    const now = new Date();
    const hours24 = now.getHours();
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const ampm = hours24 >= 12 ? 'PM' : 'AM';
    const formattedTime = `${(hours24 % 12) || 12}:${minutes} ${ampm}`;

    document.querySelectorAll('.clock').forEach($el => $el.textContent = formattedTime);
  };

  const $dialog = document.querySelector('dialog');

  /**
   * Triggers a blinking effect on the dialog.
   *
   * @return {void}
   */
  const blinkDialog = () => {
    if ($dialog.classList.contains('blink') || !$dialog.open) {
      return; // prevent multiple triggers
    }

    $dialog.classList.add('blink');
    window.setTimeout(() => $dialog.classList.remove('blink'), 350 * 4 - 50);
  };

  /** Centers the dialog in the viewport. */
  const centerDialog = () => {
    $dialog.style.transform = 'none';

    let [prevTop, prevLeft] = ['', ''];

    // dirty hack to ensure the dialog is centered
    while (true) {
      $dialog.style.top = `calc(50% - ${$dialog.offsetHeight / 2}px)`;
      $dialog.style.left = `calc(50% - ${$dialog.offsetWidth / 2}px)`;

      if (prevTop !== $dialog.style.top || prevLeft !== $dialog.style.left) {
        prevTop = $dialog.style.top;
        prevLeft = $dialog.style.left;
      } else {
        break; // exit loop when the position is stable
      }
    }
  };

  { // add event listeners
    // blink the dialog when clicking on outside the dialog
    [document.querySelector('.desktop'), document.querySelector('.taskbar')].forEach(($el) => {
      $el.addEventListener('click', blinkDialog);
    });

    // prevent event propagation from the dialog to the desktop and taskbar
    $dialog.addEventListener('click', (e) => e.stopPropagation());

    /**
     * Get the client coordinates of the event, handling both mouse and touch events.
     *
     * @param {MouseEvent|TouchEvent} e
     * @return { {x: number, y: number} }
     */
    const getClientCoords = (e) => {
      if (e.touches && e.touches.length > 0) {
        return { x: e.touches[0].clientX, y: e.touches[0].clientY };
      } else {
        return { x: e.clientX, y: e.clientY };
      }
    };

    const onStart = (e) => {
      e.preventDefault();
      e.stopPropagation();

      const { x: startX, y: startY } = getClientCoords(e);
      const dialogStyle = window.getComputedStyle($dialog);
      const offsetX = startX - parseInt(dialogStyle.left, 10);
      const offsetY = startY - parseInt(dialogStyle.top, 10);

      const onMove = (e) => {
        const { x: clientX, y: clientY } = getClientCoords(e);

        let top = Math.max(clientY - offsetY, 0);
        let left = Math.max(clientX - offsetX, 0);

        // prevent overflow
        if (left + $dialog.clientWidth > window.innerWidth) {
          left = window.innerWidth - $dialog.clientWidth;
        }

        if (top + $dialog.clientHeight > window.innerHeight) {
          top = window.innerHeight - $dialog.clientHeight;
        }

        $dialog.style.top = top + 'px';
        $dialog.style.left = left + 'px';

        e.preventDefault();
      };

      const onEnd = () => {
        ['mousemove', 'touchmove'].forEach(eventType => document.removeEventListener(eventType, onMove));
        ['mouseup', 'touchend'].forEach(eventType => document.removeEventListener(eventType, onEnd));
      };

      ['mousemove', 'touchmove'].forEach(eventType => document.addEventListener(eventType, onMove, { passive: false }));
      ['mouseup', 'touchend'].forEach(eventType => document.addEventListener(eventType, onEnd));
    };

    ['mousedown', 'touchstart'].forEach(eventType => {
      $dialog.querySelector('header').addEventListener(eventType, onStart, { passive: false });
    });

    window.addEventListener('resize', centerDialog);
    window.setInterval(updateClock, 1000);
  }

  updateClock();
  centerDialog();
</script>

<!-- {{- if l10n_enabled -}} -->
<script>// {{ l10nScript }}</script>
<!-- {{- end -}} -->
</body>
</html>
